<template>
  <div class="main">
    <button class="logout" @click="logout">退出</button>
    <div class="header">
        <div class="header-inline">
            商户名称：{{placename}}
        </div>
        <div class="header-inline">
            有效期：<span :class="new Date()>expired?'red':''">{{reTime(expired)}}</span><span class="red" v-if="new Date()>expired">(已过期)</span>
        </div>
    </div>
    <div class="info">
        <div class="info-inline">
            <div class="info-left">
                <div class="title">
                    今日游戏开局数
                </div>
                <div class="num">
                    {{today[0]}}
                </div>
            </div>
            <div class="line"></div>
            <div class="info-right">
                <div class="title">
                    今日游戏人数
                </div>
                <div class="num">
                    {{today[1]}}
                </div>
            </div>
        </div>
        <div class="info-inline">
            <div class="info-left">
                <div class="title">
                    昨日游戏开局数
                </div>
                <div class="num">
                    {{yesterday[0]}}
                </div>
            </div>
            <div class="line"></div>
            <div class="info-right">
                <div class="title">
                    昨日游戏人数
                </div>
                <div class="num">
                    {{yesterday[1]}}
                </div>
            </div>
        </div>
        <div class="info-inline">
            <div class="info-left">
                <div class="title">
                    上周游戏开局数
                </div>
                <div class="num">
                    {{lastweek[0]}}
                </div>
            </div>
            <div class="line"></div>
            <div class="info-right">
                <div class="title">
                    上周游戏人数
                </div>
                <div class="num">
                    {{lastweek[1]}}
                </div>
            </div>
        </div>
        <div class="info-inline">
            <div class="info-left">
                <div class="title">
                    上个月游戏开局数
                </div>
                <div class="num">
                    {{lastmonth[0]}}
                </div>
            </div>
            <div class="line"></div>
            <div class="info-right">
                <div class="title">
                    上个月游戏人数
                </div>
                <div class="num">
                    {{lastmonth[1]}}
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      expired: "",
      placenameFull: "",
      placename:'',
      today: [0, 0],
      yesterday: [0, 0],
      lastweek: [0, 0],
      lastmonth: [0, 0]
    };
  },
  mounted() {
    var self = this;
    self.yl.get({
      url: "/merchant/merchant_api/mch_info.json",
      success: function(res) {
        if (res.result == "success") {
          self.expired = res.data.expired;
          self.placenameFull = res.data.placenameFull;
          self.placename = res.data.placename;
          self.today = res.data.game_play_counts.today;
          self.yesterday = res.data.game_play_counts.yesterday;
          self.lastweek = res.data.game_play_counts.lastweek;
          self.lastmonth = res.data.game_play_counts.lastmonth;
          document.title=self.placename;
          var time= new Date();
        //   if(time>self.expired){
        //     //   self.$toast('已过期')
        //   }
        }else if (res.result == "failure") {
            if (res.errorCode == 100) {
            //   self.$toast('登录超时')
              self.$router.push("/login");
            }else{
              self.$toast(res.errorMsg)
            }
        }
      }
    });
  },
  methods: {
    logout(){
      this.$router.push("/login");
    },
    reTime: function(date) {
      var gmtCreate = new Date(Number(date)),
        y = gmtCreate.getFullYear(),
        m =
          gmtCreate.getMonth() + 1 <= 9
            ? "0" + (gmtCreate.getMonth() + 1)
            : gmtCreate.getMonth() + 1,
        d =
          gmtCreate.getDate() <= 9
            ? "0" + gmtCreate.getDate()
            : gmtCreate.getDate(),
        h =
          gmtCreate.getHours() <= 9
            ? "0" + gmtCreate.getHours()
            : gmtCreate.getHours(),
        mi =
          gmtCreate.getMinutes() <= 9
            ? "0" + gmtCreate.getMinutes()
            : gmtCreate.getMinutes(),
        s =
          gmtCreate.getSeconds() <= 9
            ? "0" + gmtCreate.getSeconds()
            : gmtCreate.getSeconds();
      var date1 = y + "-" + m + "-" + d;
      return date1;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background: #f0eff5;
  min-height: 100vh;
  padding: 0.8rem 0.55rem 0;
}
.main .header {
  text-align: left;
  padding: 0.1rem 0;
  background: #fff;
  border-radius: 0.2rem;
  font-size: 0.38rem;
  color: #777;
  margin-bottom: 0.6rem;
  box-shadow: 0 0 0.2rem rgb(196, 196, 196);
  position: relative;
}
.main .logout{
  position: absolute;
  left: 10px;
  top: 10px;
  color: rgb(255, 11, 11);
}
.main .header .header-inline {
  padding-left: 0.7rem;
  padding-top: 0.1rem;
  line-height: 1.5;
}
.main .header .header-inline .red{
    color: rgb(255, 11, 11);
}
.main .header .header-inline:nth-child(1) {
  border-bottom: 1px solid #e5e5e5;
}
.main .info {
  padding: 0.2rem;
  background: #fff;
  font-size: 0.28rem;
  border-radius: 0.15rem;
  box-shadow: 0 0 0.2rem rgb(196, 196, 196);
}
.main .info .info-inline {
  margin-bottom: 0.27rem;
  background: #e57653;
  color: #fff;
  border-radius: 0.15rem;
  overflow: hidden;
  position: relative;
}

.main .info .info-inline .info-left,
.main .info .info-inline .info-right {
  float: left;
  width: 50%;
  padding: 0.2rem 0 0.1rem 0;
  text-align: center;
}
.main .info .info-inline .num {
  font-size: 0.64rem;
}
.main .info .info-inline .line {
  width: 1px;
  height: 100%;
  border-right: 1px dashed #fff;
  position: absolute;
  left: 50%;
}
</style>
